import { MenuItem } from '@chakra-ui/react';

import { ImageDTO } from '@tourfly/api';
import { memo, useCallback } from 'react';
import { useTranslation } from 'react-i18next';
import { FaDownload, FaExternalLinkAlt, FaFolder } from 'react-icons/fa';

import {
  imagesToChangeSelected,
  isModalOpenChanged,
} from '@/features/ChangeBoardModal/store/slice';

import { useAppDispatch } from '@/store/hooks';

type SingleSelectionMenuItemsProps = {
  imageDTO: ImageDTO;
};

const SingleSelectionMenuItems = (props: SingleSelectionMenuItemsProps) => {
  const { imageDTO } = props;

  const dispatch = useAppDispatch();
  const { t } = useTranslation();

  const handleChangeBoard = useCallback(() => {
    dispatch(imagesToChangeSelected([imageDTO]));
    dispatch(isModalOpenChanged(true));
  }, [dispatch, imageDTO]);

  return (
    <>
      <MenuItem
        as="a"
        href={imageDTO.image_url}
        target="_blank"
        icon={<FaExternalLinkAlt />}
      >
        {t('common.openInNewTab')}
      </MenuItem>
      <MenuItem
        as="a"
        download={true}
        href={imageDTO.image_url}
        target="_blank"
        icon={<FaDownload />}
        w="100%"
      >
        {t('parameters.downloadImage')}
      </MenuItem>
      <MenuItem icon={<FaFolder />} onClickCapture={handleChangeBoard}>
        {t('gallery.changeBoard')}
      </MenuItem>
      {/* <MenuItem
        sx={{ color: 'error.600', _dark: { color: 'error.300' } }}
        icon={<FaTrash />}
        onClickCapture={handleDelete}
      >
        {t('gallery.deleteImage')}
      </MenuItem> */}
    </>
  );
};

export default memo(SingleSelectionMenuItems);
